---
title: <RedirectToSignIn />
---

The `<RedirectToSignIn />` component automatically redirects unauthenticated users to the sign-in page. If the user is already authenticated, this component will render nothing and allow the user to view the content normally.

Useful for wrapping pages or routes that require users to be signed in.

## Usage

```tsx
import { RedirectToSignIn, SignedIn } from "@daveyplate/better-auth-ui"

export default function ProtectedPage() {
    return (
        <>
            <RedirectToSignIn />

            <SignedIn>
                You can see this content only if you are authenticated.
            </SignedIn>
        </>
    )
}
```

## Example

Here's a practical example of enforcing authentication for private routes:

```tsx title="PrivateRoute.tsx"
import { RedirectToSignIn, SignedIn } from "@daveyplate/better-auth-ui"

export default function PrivateRoute({ children }: { children: React.ReactNode }) {
  return (
    <>
      <RedirectToSignIn />
      
      <SignedIn>
        {children}
      </SignedIn>
    </>
  )
}
```

In this example, we're ensuring that the user is redirected to the sign-in page if they are not logged in.